import React, {PropTypes, Component} from 'react'
import Table from './Table'
import TextInput from './TextInput'

import style from './addStore.css'
import './../css/default-table.css'

import {myAjax, ROOTURL} from './../publicAPI/publicAPI'

class GlobalM extends Component {

    constructor(props, context) {
        super(props, context);
        console.log("初始化");
        this.state = {
            textInput1: "",
            textInput2: "",
            textInput3: "",
            textInput4: "",
            textInput5: "",
            textInput6: "",
            textInput7: "",
            textInput8: "",
            textInput9: "",
            textInput10: "",
            error: "",
            hasBeenMounted: false
        }; // 初始化状态
    }

    componentWillMount() {
        console.log("将安装");
        if (!this.state.hasBeenMounted) {
            var _this = this;
            var data = {};
            const url = ROOTURL + 'config/dynamic/public/search.api';
            fetch(url, {
                method: "POST",
                body: JSON.stringify({
                    // k: text
                })
            }).then(res=> {
                if (res.ok) {
                    res.json().then(val=> {
                        console.log(val);
                        val.forEach((input)=> {
                            var index = parseInt(input.k.substr(9));
                            if ( index <= 7 || index == 10) {
                                data[input.k] = parseInt(input.v);
                            } else {
                                data[input.k] = parseInt(input.v / 60000)
                            }
                            data['hasBeenMounted'] = true;
                            _this.setState(data);
                        });
                    })
                } else {
                    console.log('数据获取出错')
                }
            });

        }


    }

    componentDidMount() {
        console.log("安装成功");
        this._input.refs['[object Object]'].focus()
    }

    handleSave() {
        for (var i = 1; i <= 10; i++) {
            var text = "textInput" + i;
            if (this.state[text] == "" || isNaN(this.state[text])) {
                this.setState({error: "格式错误"});
                return;
            }
        }
        const url = ROOTURL + 'config/dynamic/public/set.api';
        var count = 0;
        var _this = this;
        for (var i = 1; i <= 10; i++) {
            var text = "textInput" + i;
            var data = {
                k: text,
                v: this.state[text]
            };
            if (i >= 8 && i <= 9) {
                data.v = parseInt(this.state[text]) * 60000
            }
            myAjax(url, "POST", data, function () {
                if (++count == 10) {
                    _this.setState({error: "保存成功"});
                }
            }, function (err) {/*location.href="/"*/
            });
        }

    }

    handleClick() {
        myAjax('https://api.github.com/users/js', 'POST', {id: 11}, function () {
            alert("ok")
        }, function () {
            alert("error")
        })
    }

    tBody() {
        const _data = [
            {id: 1, name: "ra1	", rage: "RegionAdmin"},
            {id: 2, name: "radmin	", rage: "RegionAdmin"},
            {id: 3, name: "root2", rage: "Admin"},
            {id: 12, name: "root", rage: "Admin"}

        ];

        return _data.map(item => <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.name}</td>
            <td>{item.rage}</td>

            <td>
            </td>
        </tr>)
    }

    render() {
        return (
            <div className="right-wapper">
                <div className="wrap">


                    <h2 className={style.globalHeader}>理发师每小时的服务上限(次/小时)</h2>
                    <table className="default-table globalTable">
                        <tbody>
                        <tr>
                            <th>剪发(气洗)</th>
                            <th>剪发(水洗)</th>
                            <th>洗吹</th>
                            <th>冷烫</th>
                            <th>烫染(普通)</th>
                            <th>烫染(高级)</th>
                            <th>烫染(豪华)</th>
                        </tr>
                        <tr>
                            <td><TextInput style={{width: "50px",textAlign: "right"}} val={this.state.textInput1}
                                           onChange={(val)=>{this.setState({textInput1:val})}}/>
                            </td>
                            <td><TextInput style={{width: "50px",textAlign: "right"}} val={this.state.textInput2} ref={(c) => this._input = c}
                                           onChange={(val)=>{this.setState({textInput2:val})}}/>
                            </td>
                            <td><TextInput style={{width: "50px",textAlign: "right"}} val={this.state.textInput3} ref={(c) => this._input = c}
                                           onChange={(val)=>{this.setState({textInput3:val})}}/>
                            </td>
                            <td><TextInput style={{width: "50px",textAlign: "right"}} val={this.state.textInput4}
                                           onChange={(val)=>{this.setState({textInput4:val})}}/>
                            </td>
                            <td><TextInput style={{width: "50px",textAlign: "right"}} val={this.state.textInput5}
                                           onChange={(val)=>{this.setState({textInput5:val})}}/>
                            </td>
                            <td><TextInput style={{width: "50px",textAlign: "right"}} val={this.state.textInput6}
                                           onChange={(val)=>{this.setState({textInput6:val})}}/>
                            </td>
                            <td><TextInput style={{width: "50px",textAlign: "right"}} val={this.state.textInput7}
                                           onChange={(val)=>{this.setState({textInput7:val})}}/>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div className={style['input_div']}>
                        <h2 style={{marginBottom: "5px",lineHeight:"30px"}}>订单支付时效</h2>
                        <TextInput id="contract_pay" style={{width: "50px",textAlign: "right"}}
                                   val={this.state.textInput8}
                                   onChange={(val)=>{this.setState({textInput8:val})}}/> 分钟
                    </div>
                    <div className={style['input_div']}>
                        <h2 style={{marginBottom: "5px",lineHeight:"30px"}}>订单服务时效</h2>
                        <TextInput id="customer_serve" style={{width: "50px",textAlign: "right"}}
                                   val={this.state.textInput9}
                                   onChange={(val)=>{this.setState({textInput9:val})}}/> 分钟
                    </div>
                    <div className={style['input_div']}>
                        <h2 style={{marginBottom: "5px",lineHeight:"30px"}}>用户可预约天数</h2>
                        <TextInput id="customer_reserve" style={{width: "50px",textAlign: "right"}}
                                   val={this.state.textInput10}
                                   onChange={(val)=>{this.setState({textInput10:val})}}/> 天
                    </div>
                    {this.state.error != "" ?
                        <span id={style["hint"]}>{this.state.error}</span> : null}
                    <button id="submit" className={style['main_btn']}
                            style={{backgroundColor: '#2285c7',border: '1px solid #1e77b3'} }
                            onClick={this.handleSave.bind(this)}>保存
                    </button>
                </div>
            </div>
        )
    }
}

export default GlobalM
